<template>
	<view class="dialog" :class="{'dc':type == 'center'}" @touchmove.prevent>
		<view class="dialogBox" :class="{'dialogTop':type == 'top'}" v-if="tradePasswordType == 2">
			<view class="coding_box">
				<view class="title">请输入支持数量</view>
				<view class="closeItem" @click="close">X</view>
				<view class="coding_box_item">
					<image src="/static/my/shenye_icon.png" mode=""></image>
					<text>神椰CoCo：</text>
					<view class="numberBox">
						<!-- <input v-else type="number" v-model="num"  > -->
						<input type="digit" v-model="num" @focus="focusFunc" :cursor-spacing="10" :always-embed="true"
							:adjust-position="false">
					</view>
					<!-- <view class="custom" @click="opennumber">自定义</view> -->
				</view>
				<view class="coding_balance">
					当前余额：{{usable}} CoCo
				</view>
				<view class="coding_but" @click="pay" v-if="type == 'center'">
					确认支付
				</view>
			</view>
		</view>
		<view class="dialogBox" :class="{'dialogTop':type == 'top'}" v-if="tradePasswordType == 1">
			<view class="coding_box">
				<view class="title"></view>
				<view class="closeItem" @click="close">X</view>
				<view class="coding_box_item coding_box_item_no">
					您还未设置积分交易密码请先前往设置
				</view>
				<view class="but_no" @click="setPassword">
					设置交易密码
				</view>
			</view>
		</view>
		<view class="password_box" v-if="type == 'top'">
			<view class="password_title">输入6位交易密码</view>
			<view class="password_num">
				<view class="password_zi" v-for="(item, index) in 6">
					<view :class="{'passwordOn':password[index]}"></view>
				</view>
			</view>
			<view class="digital_keyboard">
				<view class="keyboard_kuagn" v-for="(el,elindex) in numberBox">
					<view class="otherbg" v-if="el.id == 10"></view>
					<view class="delete" v-else-if="el.id == 12" @tap="deleteNum(el)"></view>
					<view v-else class="keyboard_num" @tap="clickNum(el)">{{el.num}} </view>
				</view>
			</view>
			<view style="width: 100%;height: 50rpx; "></view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomerAmount
	} from '@/api/api-v1-2.js'
	export default {
		props: {
			title: {
				type: String,
				value: '温馨提示'
			},
			payNumber: {
				type: String,
				value: '0'
			},
		},
		data() {
			return {
				numberBox: [{
						id: 1,
						num: '1'
					},
					{
						id: 2,
						num: '2'
					},
					{
						id: 3,
						num: '3'
					},
					{
						id: 4,
						num: '4'
					},
					{
						id: 5,
						num: '5'
					},
					{
						id: 6,
						num: '6'
					},
					{
						id: 7,
						num: '7'
					},
					{
						id: 8,
						num: '8'
					},
					{
						id: 9,
						num: '9'
					},
					{
						id: 10,
						num: ''
					},
					{
						id: 11,
						num: '0'
					},
					{
						id: 12,
						num: ''
					},
				],
				password: '', // 所输入的密码
				type: 'center', //判断密码框输入位置
				disabled: true, // 判断是否自定义输入
				num: 0, // coco 输入数量
				tradePasswordType: null, //判断是否设置密码
				usable: 0, //coco 余额
				clickStatus: true //防重复点击
			}
		},
		created(e) {
			this.num = this.payNumber
			this.getCustomer()
			this.getCustomerAmount()

		},
		onHide() {
			uni.hideKeyboard()
		},
		mounted() {
			this.judgePlatForm()
			// let webView = WKWebView()
			// webView.keyboardDisplayRequiresUserAction = false
		},
		methods: {
			//判断安卓还是iOS
			judgePlatForm() {
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') {
					// console.log('我是iOS')
					this.autofocus = true
				} else if (platform == 'android') {
					// console.log('我是安卓')
					this.autofocus = false
				}
			},
			// 判断coco 余额
			async getCustomerAmount() {
				var res = await getCustomerAmount()
				this.usable = res.result.usable
			},
			// 判断 是否设置密码
			async getCustomer() {
				var res = await this.$api.getCustomer()
				this.tradePasswordType = res.data.tradePasswordType
			},
			// 聚焦 自定义输入事件
			focusFunc() {
				this.type = 'center'
			},
			// 聚焦事件
			opennumber() {
				this.num = ''
			},
			// 支付判断
			pay() {
				var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/ //判断大于0的数值且最多保留两位小数的数值
				var isTrue = reg.test(this.num)
				console.log(isTrue)
				if (Number(this.num) < Number(this.payNumber)) {
					uni.showToast({
						title: '输入支持数量不能小于' + this.payNumber,
						icon: 'none'
					})
					this.num = this.payNumber
				}else if(!isTrue){
					uni.showToast({
						title: '输入数量最多保留两位小数',
						icon: 'none'
					})
					return
				}
				else {
					if (this.clickStatus) {
						this.type = 'top'
					}
					setTimeout(() => {
						this.clickStatus = true
					}, 1500)
				}
			},
			// 关闭窗口
			close() {
				this.$emit('close')
			},
			// 设置密码
			setPassword() {
				uni.navigateTo({
					url: '/pages/my/set-up/transaction-password/password-settings/password-settings?step=1&match=1'
				})
			},
			// 完成交易密码输入事件
			clickNum(key) {
				if (this.password.length < 6) {
					this.password += key.num
					if (this.password.length === 6) {
						// 密码验证操作
						var data = {
							password: this.password,
							betAmount: this.num
						}
						this.$emit('determine', data)
						// console.log(this.password,'37')
						// this.$.open('/trait/details');
					}
				}

			},
			// 删除交易密码
			deleteNum() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
			},
		}
	}
</script>

<style scoped>
	.dialog {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
	}

	.dc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.dialogBox {
		width: 630rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: 999;
		background: #fff;

	}

	.dialogTop {
		margin: 0 auto;
		margin-top: 40rpx;
	}

	/* 弹窗组件 */
	.coding_box {
		padding-bottom: 60rpx;
		position: relative;
	}

	.closeItem {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.coding_box .title {
		width: 85%;
		margin: 0 auto;
		text-align: center;
		padding-top: 60rpx;
		font-size: 36rpx;
		color: #222222;
		font-weight: 500;
	}

	.coding_box_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 86rpx;
	}

	.coding_box_item .numberBox {
		text-align: center;
		color: #222222;
		font-size: 44rpx;
		width: 140rpx;
		border-bottom: 2rpx solid #A7A7A7;
	}

	.numberBox input,
	.coding_box_item .numberBox text {
		width: 100%;
		font-size: 44rpx;
	}

	.coding_box_item image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}

	.coding_box_item text {
		font-size: 36rpx;
		color: #222222;

	}

	.coding_box_item .custom {
		color: #1D46ED;
		font-size: 30rpx;
		margin-left: 28rpx;
	}

	.coding_balance {
		width: 100%;
		margin-top: 42rpx;
		color: #555555;
		font-size: 30rpx;
		text-align: center;
	}

	.coding_but {
		width: 370rpx;
		height: 92rpx;
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 92rpx;
		text-align: center;
		margin-top: 68rpx;
	}

	/*  */
	.password_box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 778rpx;
		background: #F5F5F6;
	}

	.password_title {
		background: #ffffff;
		font-size: 32rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		padding: 40rpx 0;
	}

	.password_num {
		background: #ffffff;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.password_zi:first-child {
		border-left: 2rpx solid #A5A8BB;
	}

	.password_zi {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 116rpx;
		height: 116rpx;
		border-top: 2rpx solid #A5A8BB;
		border-bottom: 2rpx solid #A5A8BB;
		border-right: 2rpx solid #A5A8BB;
	}

	.passwordOn {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: #222222;
	}

	.digital_keyboard {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-top: 60rpx;
		background: #ffffff;
	}

	.keyboard_kuagn {
		font-size: 56rpx;
		color: #030303;
		width: 248rpx;
		height: 108rpx;
		background: #fff;

		border-top: 2rpx solid #F5F5F6;
		border-right: 2rpx solid #F5F5F6;
		/* border-bottom: 2rpx solid #F5F5F6; */
	}

	.delete {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #F5F5F6 url('/static/index/activity/delete.png') no-repeat;
		background-size: 100% 100%;
	}

	.otherbg {
		width: 100%;
		height: 100%;
		background: #F5F5F6;
	}

	.keyboard_num {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.keyboard_num:active {
		background: rgba(0, 0, 0, 0.1);
	}

	/* news add */
	.coding_box_item_no {
		width: 100%;
		box-sizing: border-box;
		padding: 0 100rpx;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
	}

	.but_no {
		padding: 15rpx 0;
		text-align: center;
		width: 300rpx;
		margin: 30rpx auto;
		background: #6F00FC;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;
	}
</style>
